<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <link href='../lib/fullcalendar/fullcalendar.min.css' rel='stylesheet'/>
    <link href='../lib/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/>
    <link href='../css/my-calendar.css' rel='stylesheet'/>
    <!-- 引入bootstrap官网的文件，本地的引入图标出不来 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src='../lib/fullcalendar/lib/moment.min.js'></script>
    <script src='../lib/fullcalendar/lib/jquery.min.js'></script>
    <script src='../lib/fullcalendar/fullcalendar.min.js'></script>
    <script src='../lib/fullcalendar/locale/zh-cn.js'></script>

    <script src="../lib/bootstrap/js/bootstrap.js"></script>
    <script src='../js/my-calendar.js'></script>

    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #wrap {
            width: 1200px;
            margin: 0 auto;
        }

        #calendar {
            float: right;
            width: 1050px;
        }

        #external {
            float: left;
        }

        #external-events {
            width: 100px;
            height: 100px;
            text-align: left;
            margin-top: 30px;
        }

        #external-trash {
            width: 100px;
            height: 100px;
        }

        #external-trash {
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>
<div id='wrap'>
    <div id="external">
        <div style="margin-top:100px">
            <table>
                <tr>
                    <td>
                        <span style="background:#E9967A;margin-right: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>学习</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="background:#8CC7B5;margin-right: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>待复习</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="background:#cbced2;margin-right: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>已完成</span>
                    </td>
                </tr>
            </table>
        </div>
        <div style="margin-top: 510px">
            <button type="button" data-toggle="popover" title="提示" data-placement="left" data-trigger="focus"
                    data-content="拖拽删除事件。直接删除学习事件，可以将后面的复习事件连带删除哦~"><span
                    class="glyphicon glyphicon glyphicon-info-sign" aria-hidden="true"/></button>
        </div>
        <div id='external-events'>
            <img id='external-trash' src="../img/trash.png" alt="拖拽到此处删除" title="拖拽到此处删除" width="100px"/>
        </div>
    </div>
    <div id='calendar'></div>
</div>

</body>
</html>
